<template>
  <div class="invoice-container">
    <el-breadcrumb>
      <el-breadcrumb-item>结算管理</el-breadcrumb-item>
      <el-breadcrumb-item>发票管理</el-breadcrumb-item>
      <el-breadcrumb-item>发票详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="home-page">
      <section>
        <h1>订单信息</h1>
        <el-row class="box">
          <el-col :span="12">
            <label>订单编号:</label>&nbsp;&nbsp;&nbsp;{{orderNum}}  
          </el-col>
        </el-row>
        <div class="content">
          <el-table :data="checkInList">
            <el-table-column prop="num"
              label="账号编号"
              min-width="125">
            </el-table-column>
            <el-table-column label="入离时间"
              width="225"
              prop="liveLeave">             
            </el-table-column>
            <el-table-column label="入住房号"
              min-width="200"
              prop="roomNum">
            </el-table-column>
            <el-table-column label="入住房型"
              min-width="200"
              prop="room">
            </el-table-column>
            <el-table-column label="总消费"
              width="325"
              prop="moneySum">
            </el-table-column>
          </el-table>
        </div>
      </section>
      <!-- 前台领取 -->
      <div v-if="ticketWayStr == 1">
        <section>
          <h1>发票信息</h1>
          <div class="content">
            <el-row class="box">
              <el-col :span="12">
                <label>发票性质:</label>{{invoiceInfoEntity.taxType ==1?"纸质发票":"电子发票"}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>开票状态:</label>{{invoiceInfoEntity.invoiceState ==1?"未开票":"已开票"}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>取票方式:</label>{{ticketWay}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>申请时间:</label>{{invoiceInfoEntity.applyTime}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>顾客要求:</label><span class="gk">{{invoiceInfoEntity.content}}</span>
              </el-col>
            </el-row>
          </div>
        </section>
        <section>
          <h1>领取信息</h1>
          <div class="content">
            <el-row class="box">
              <el-col :span="12">
                <label>领取状态:</label>{{stateDoneCN}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>领取姓名:</label>{{invoiceInfoEntity.getPerson}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>联系电话:</label>{{invoiceInfoEntity.getPhone}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>领取时间:</label>{{invoiceInfoEntity.getTime}}
              </el-col>
            </el-row>
          </div>
        </section>
      </div>
      <!-- 快递邮寄 -->
      <div  v-if="ticketWayStr == 2">
        <section>
          <h1>发票信息</h1>
          <div class="content">
            <el-row class="box">
              <el-col :span="12">
                <label>发票性质:</label>{{invoiceInfoEntity.taxType ==1?"纸质发票":"电子发票"}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>开票状态:</label>{{invoiceInfoEntity.invoiceState ==1?"未开票":"已开票"}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>取票方式:</label>{{ticketWay}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>邮寄方式:</label>
                <span v-if="invoiceInfoEntity.addresseePhone">{{invoiceInfoEntity.addressee}}({{invoiceInfoEntity.addresseePhone}}){{invoiceInfoEntity.mailAddress}}</span>
               
              </el-col> 
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>申请时间:</label>{{invoiceInfoEntity.applyTime}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>顾客要求:</label><span class="gk">{{invoiceInfoEntity.content}}</span>
              </el-col>
            </el-row>
          </div>
        </section>
        <section>
          <h1>领取信息</h1>
          <div class="content">
            <el-row class="box">
              <el-col :span="12">
                <label>领取状态:</label>{{stateDoneCN}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>快递公司:</label>{{invoiceInfoEntity.crrcCompany}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>邮寄单号:</label>{{invoiceInfoEntity.crrcNumber}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>邮寄时间:</label>{{invoiceInfoEntity.crrcTime}}
              </el-col>
            </el-row>
          </div>
        </section>
      </div>     
      <!-- 邮箱发送 -->
      <div v-if="ticketWayStr == 3">
        <section>
          <h1>发票信息</h1>
          <div class="content">
            <el-row class="box">
              <el-col :span="12">
                <label>发票性质:</label>{{invoiceInfoEntity.taxType ==1?"纸质发票":"电子发票"}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>开票状态:</label>{{invoiceInfoEntity.invoiceState ==1?"未开票":"已开票"}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>取票方式:</label>{{ticketWay}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>邮箱地址:</label>{{invoiceInfoEntity.email}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>申请时间:</label>{{invoiceInfoEntity.applyTime}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>顾客要求:</label><span class="gk">{{invoiceInfoEntity.content}}</span>
              </el-col>
            </el-row>
          </div>
        </section>
        <section>
          <h1>领取信息</h1>
          <div class="content">
            <el-row class="box">
              <el-col :span="12">
                <label>领取状态:</label>{{stateDoneCN}}
              </el-col>
            </el-row>
            <el-row class="box">
              <el-col :span="12">
                <label>发送时间:</label>{{invoiceInfoEntity.crrcTime}}
              </el-col>
            </el-row>
          </div>
        </section>
      </div>
      <section class="account-info">
        <h1>发票内容</h1>
        <div class="content" v-if="invoiceInfoEntity.invoiceType ==1">
          <el-row class="box">
            <el-col :span="12">
              <label>发票金额:</label>{{invoiceInfoEntity.invoiceMoney}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>开票类型:</label>{{invoiceType}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>发票抬头:</label>{{invoiceInfoEntity.invoiceTitle}}
            </el-col>
          </el-row>
          <!-- <el-row class="box qrcode">
            <el-col :span="6">
              <label class="fl">发票二维码</label><img :src="invoiceInfoEntity.qRCode"
                alt=""
                class="qrcode"
                width="100">
            </el-col>
          </el-row> -->
        </div>
        <div class="content" v-if="invoiceInfoEntity.invoiceType ==2">
          <el-row class="box">
            <el-col :span="12">
              <label>发票金额:</label>{{invoiceInfoEntity.invoiceMoney}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>开票类型:</label>{{invoiceType}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>发票抬头:</label>{{invoiceInfoEntity.invoiceTitle}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>税      号:</label>{{invoiceInfoEntity.taxNumb}}
            </el-col>
          </el-row>
          <el-row class="box qrcode">
            <el-col :span="6"
              v-if="invoiceInfoEntity.qRCode">
              <label class="fl">发票二维码</label><img :src="invoiceInfoEntity.qRCode"
                alt=""
                class="qrcode"
                width="100">
            </el-col>
          </el-row>
        </div>
        <div class="content" v-if="invoiceInfoEntity.invoiceType ==3">
          <el-row class="box">
            <el-col :span="12">
              <label>发票金额:</label>{{invoiceInfoEntity.invoiceMoney}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>开票类型:</label>{{invoiceType}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>发票抬头:</label>{{invoiceInfoEntity.invoiceTitle}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>税      号:</label>{{invoiceInfoEntity.taxNumb}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>注册地址:</label>{{invoiceInfoEntity.address}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>联系电话:</label>{{invoiceInfoEntity.phone}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>开户银行:</label>{{invoiceInfoEntity.acountBank}}
            </el-col>
          </el-row>
          <el-row class="box">
            <el-col :span="12">
              <label>银行账号:</label>{{invoiceInfoEntity.acountNumb}}
            </el-col>
          </el-row>
          <el-row class="box qrcode">
            <el-col :span="6"
              v-if="invoiceInfoEntity.qRCode">
              <label class="fl">发票二维码</label><img :src="invoiceInfoEntity.qRCode"
                alt=""
                class="qrcode"
                width="100">
            </el-col>
          </el-row>
        </div>
      </section>
    </div>
    <!-- 纸质开票操作按钮 -->
    <div class="handel-btns information-btn"
      v-if="invoiceInfoEntity.taxType ==1">
      <span v-if="invoiceInfoEntity.invoiceState !=4">
        <el-button type="primary"
          @click="invoice_success"
          v-if="invoiceInfoEntity.invoiceState ==1 "
          v-has="'invoicesucceed'">开票完成</el-button>
        <el-button type="primary"
          @click="invoice_get"
          v-if="invoiceInfoEntity.invoiceState ==2 && invoiceInfoEntity.ticketWay  == 1">领取人信息</el-button>
        <el-button type="primary"
          @click="invoice_send"
          v-if="invoiceInfoEntity.invoiceState  ==2 && invoiceInfoEntity.ticketWay  == 2 ">邮寄信息</el-button>
      </span>
      <el-button @click="$router.back()"
        style="margin-left:12px;">返回</el-button>
    </div>
    <!-- 电子发票 -->
    <div class="handel-btns information-btn"
      v-if="invoiceInfoEntity.taxType ==2">
      <span v-if="invoiceInfoEntity.invoiceState !=4">
          <el-button type="primary"
          @click="invoice_success"
          v-if="invoiceInfoEntity.invoiceState ==1 "
          v-has="'invoicesucceed'">开票完成</el-button>
          <el-button type="primary"
          @click="invoice_Email"
          v-if="invoiceInfoEntity.ticketType ==3&&invoiceInfoEntity.invoiceState ==2">已发送</el-button>        
      </span>
      <el-button @click="$router.back()"
        style="margin-left:12px;">返回</el-button>
    </div>
    <!-- 领取信息弹窗 -->
    <el-dialog :visible.sync="dialog_get"
      v-if="dialog_get"
      width="400px"
      title="领取信息"
      center>
      <div class="content">
        <el-form label-width="60px">
          <el-form-item label="领取人">
            <el-input placeholder="请输入领取人"
              style="width:80%;"
              v-model="getPerson"
              v-filterSpecialChar="getPerson"
              maxlength="12"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input placeholder="请输入联系电话"
              style="width:80%;"
              v-model="phone"
              maxlength="11"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="update_getInfo">提交</el-button>
        <el-button @click.stop="dialog_get = false">关闭</el-button>
      </span>
    </el-dialog>
     <!-- 邮寄信息弹窗 -->
    <el-dialog :visible.sync="dialog_send"
      width="400px"
      title="邮寄信息"
      center>
      <div class="content">
        <el-form>
          <el-form-item label="快递公司">
            <el-select placeholder="请选择快递公司"
              style="width:80%;"
              v-model="crrcId">
              <el-option v-for="item in crrcpullList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮寄单号">
            <el-input placeholder="请输入邮寄单号"
              style="width:80%;"
              v-model="crrcNum" maxlength="20"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="update_mail">提交</el-button>
        <el-button @click.stop="dialog_send = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  invoiceInfo,
  updateGet,
  crrcpull,
  mail,
  failure,
  succeed,
  send_email
} from "@/public/js/invoice";
const Breadcrumb = () => import("@/components/common/Breadcrumb");

export default {
  components: {
    Breadcrumb
  },
  data() {
    return {
      checkInList: [], //账单信息
      invoiceInfoEntity: "",
      ticketWayStr: "", //判断取票方式
      //stateDoneCN: "", //领取状态
      dialog_fail: false,
      dialog_get: false,
      dialog_send: false,
      loserRemark: "",
      getPerson: "",
      phone: "",
      _getPhone: "",
      getPhone: "",
      crrcpullList: [],
      crrcNum: "",
      crrcId: "",
      orderNum: ""
    };
  },
  computed: {
    // 取票方式
    ticketWay() {
      switch (this.invoiceInfoEntity.ticketWay) {
        case 1:
          return "前台领取";
          break;
        case 2:
          return "快递邮寄";
          break;
        case 3:
          return "邮箱发送";
          break;
      }
    },
    //发票类型
    invoiceType() {
      switch (this.invoiceInfoEntity.invoiceType) {
        case 1:
          return "个人";
          break;
        case 2:
          return "增值税普通";
          break;
        case 3:
          return "增值税专用";
          break;
      }
    },
    stateDoneCN() {
      if (this.invoiceInfoEntity.ticketWay == 1) {
        if (this.invoiceInfoEntity.ticketType == 3) {
          return "未领取";
        } else if (this.invoiceInfoEntity.ticketType == 4) {
          return "已领取";
        }
      }
      if (this.invoiceInfoEntity.ticketWay == 2) {
        if (this.invoiceInfoEntity.ticketType == 3) {
          return "未寄出";
        } else if (this.invoiceInfoEntity.ticketType == 4) {
          return "已寄出";
        }
      }
      if (this.invoiceInfoEntity.ticketWay == 3) {
        if (this.invoiceInfoEntity.ticketType == 3) {
          return "未发送";
        } else if (this.invoiceInfoEntity.ticketType == 4) {
          return "已发送";
        }
      }
    }
  },
  created() {
    this.id = this.$route.query.id;
    this.getCrrcpull();
    this.getInvoiceInfo();
  },
  methods: {
    // 获取入住详情数据
    getInvoiceInfo() {
      invoiceInfo({
        id: this.id
      }).then(res => {
        if (!res.data.errCode) {
          this.checkInList = res.data.checkInList;
          this.invoiceInfoOrderEntity = res.data.invoiceInfoOrderEntity;
          this.invoiceInfoEntity = res.data.invoiceInfoEntity;
          this.orderHotelInfoEntity = res.data.orderHotelInfoEntity;
          this.orderNum = res.data.invoiceInfoOrderEntity.orderNum;
          this.ticketWayStr = this.invoiceInfoEntity.ticketWay;
          this._getPerson = this.invoiceInfoEntity.getPerson;
          this._getPhone = this.invoiceInfoEntity.getPhone;
          this.crrcNum = this.invoiceInfoEntity.crrcNumber;
          this.crrcId = this.invoiceInfoEntity.crrcId;
          console.log(this.invoiceInfoEntity);
        }
      });
    },
    // 开票
    invoice_success() {
      this.$confirm("是否继续此操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        succeed({
          id: this.id
        }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "开票成功"
            });
            this.getInvoiceInfo();
          }
        });
      });
    },
    //发票领取
    invoice_get() {
      this.phone = this._getPhone;
      this.getPerson = this._getPerson;
      this.dialog_get = true;
    },
    // 修改邮寄信息
    update_mail() {
      if (!this.crrcId) {
        this.$message.error("请选择快递公司");
        return false;
      }
      if (!this.crrcNum) {
        this.$message.error("请输入邮寄单号");
        return false;
      }
      mail({
        invoiceId: this.id,
        crrcId: this.crrcId,
        crrcNum: this.crrcNum
      }).then(res => {
        if (!res.data.errCode) {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "提交成功"
            });
            this.getInvoiceInfo();
            this.dialog_send = false;
          }
        }
      });
    },
    //发送电子邮件
    invoice_Email() {
      send_email({
        id: this.id
      }).then(res => {
        this.$message({
          type: "success",
          message: "提交成功"
        });
        this.getInvoiceInfo();
      });
    },
    // 修改领取人信息
    update_getInfo() {
      var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
      if (!this.getPerson) {
        this.$message.error("请输入领取人姓名");
        return false;
      }
      if (!phoneReg.test(this.phone)) {
        this.$message.error("请输入正确的手机号码");
        return false;
      }
      updateGet({
        invoiceId: this.id,
        person: this.getPerson,
        phone: this.phone
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "提交成功"
          });
          this.getInvoiceInfo();
          this.dialog_get = false;
        }
      });
    },
    // 寄出
    invoice_send() {
      this.dialog_send = true;
    },
    // 获取快递下拉数据
    getCrrcpull() {
      crrcpull({}).then(res => {
        if (!res.data.errCode) {
          this.crrcpullList = res.data.crrcList;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.invoice-container {
  position: relative;
  padding-bottom: 100px;
  .qrcode-wrap {
    position: absolute;
    right: 40%;
    .qrcode {
      width: 100px;
      float: left;
    }
    span {
      line-height: 100px;
      display: inline-block;
      float: left;
    }
  }
  #home-page {
    font-size: 12px;
    padding: 0 30px;
    h1 {
      font-size: 16px;
      text-align: left;
      color: #6d2377;
      padding: 15px 0;
    }
    section {
      border-bottom: 1px solid #f6f6f6;
      .content {
        padding: 20px 0 10px 20px;
        position: relative;
        .box {
          padding-bottom: 15px;
          label {
            margin-right: 25px;
            text-align: right;
            display: inline-block;
            font-weight: bold;
            font-size: 14px;
            width: 75px;
          }
          .gk{
            color: red;
          }
          .dayPrice {
            margin-right: 15px;
            border: 1px solid #6d2377;
            padding: 8px;
            border-radius: 3px;
          }
        }
      }
      &.account-info {
        .totlePrice {
          padding-top: 15px;
        }
      }
    }
  }
  .account-content {
    color: #000;
    width: 1000px;
    margin: 0 auto;
    .account-title {
      font-family: "MicrosoftJhengHei";
      font-size: 18px;
      text-align: center;
      padding-bottom: 12px;
    }
    .top-1 {
      line-height: 28px;
      border-bottom: 2px solid #000;
      padding-left: 10px;
      & > div {
        display: flex;
        & > span {
          flex: 1;
        }
      }
    }
    .list {
      text-indent: 30px;
      li {
        display: flex;
        & > span {
          flex: 1;
        }
        &.header {
          border-bottom: 2px solid #000;
        }
      }
    }
  }
  .goodsList-content {
    .el-table th {
      background: #fff !important;
    }
  }
  .handel-btns {
    button {
      line-height: 32px;
      padding: 0 30px;
    }
  }
}
</style>
